import { Link } from 'react-router-dom';
import { FaBars } from "react-icons/fa";
import { AiOutlineClose } from "react-icons/ai";
import { useState, useContext } from 'react';
import { UserContext } from '../context/userContext';

const Header = () => {
  const [isNavShowing, setIsNavShowing] = useState(window.innerWidth > 800 ? true : false);
  const { currentUser } = useContext(UserContext);
  
  const closeNavHandler = () => {
    if (window.innerWidth < 800) {
      setIsNavShowing(false);
    } else {
      setIsNavShowing(true);
    }
  };

  return (
    <nav>
      <div className="container nav__container">
        <Link to="/" className='nav__logo' onClick={closeNavHandler}>
          Home
        </Link>

        {currentUser?.id && isNavShowing && <ul className="nav__menu">
          <li><Link to={`/mine/${currentUser?.id}`} onClick={closeNavHandler}>个人中心</Link></li>
          <li><Link to='/create' onClick={closeNavHandler}>发布需求</Link></li>
          <li><Link to={`/myposts/${currentUser.id}`} onClick={closeNavHandler}>我参与的项目</Link></li>
          <li><Link to='/logout' onClick={closeNavHandler}>退出登录</Link></li>
        </ul>}

        {!currentUser?.id && isNavShowing && <ul className="nav__menu">
          <li><Link to='/' onClick={closeNavHandler}>首页</Link></li>
          <li><Link to='/login' onClick={closeNavHandler}>登录</Link></li>
          <li><Link to='/register' onClick={closeNavHandler}>注册</Link></li>

        </ul>}

        <button className="nav__toggle-btn" onClick={() => setIsNavShowing(!isNavShowing)}>
          {isNavShowing ? <AiOutlineClose  style={{'color':'white'}}  /> : <FaBars style={{'color':'white'}} />}
        </button>
      </div>
    </nav>
  );
};

export default Header;






